<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">
        <el-input
          v-model="search_val.imei"
          clearable
          @clear="LoginLog"
          placeholder="请输入设备编码"
          size="small"
          style="width: 220px; margin-right: 15px"
          maxlength="50"
          oninput="this.value=this.value.replace(/[^a-zA-Z0-9]/g,'')"
        >
          <el-button
            slot="append"
            :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
            @click="searchClick"
          >
          </el-button>
        </el-input>

        <el-popover
          placement="bottom"
          width="460"
          trigger="click"
          popper-class="popover"
          size="small"
          v-model="showPopover"
        >
          <div>
            <el-form
              label-width="70px"
              style="margin: 20px 0"
              class="popover_from"
            >
              <el-form-item size="small" label="事件类型">
                <el-select
                  v-model="search_val.event"
                  placeholder="请选择事件类型"
                  size="small"
                  style="margin-left: 15px; width: 360px"
                  clearable
                >
                  <el-option
                    v-for="item in eventList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item size="small" label="日期筛选">
                <el-date-picker
                  v-model.trim="timeArr"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions"
                  style="width: 360px"
                >
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div class="footer" style="text-align: right">
              <el-button size="small" @click="resetClick" class="cancel-button"
                >重 置</el-button
              >
              <el-button size="small" @click="onSearch" class="confirm-button"
                >确 定</el-button
              >
            </div>
          </div>
          <el-button
            size="small"
            slot="reference"
            :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'"
          >
            高级搜索<i
              class="el-icon-search"
              style="margin-left: 5px; font-size: 12px"
            ></i
          ></el-button>
        </el-popover>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        height="calc(100% - 65px)"
        :header-cell-style="headerStyle"
        class="table"
        v-loading="loadingTable"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(47, 51, 73, 0.3)"
      >
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column
          align="center"
          prop="orgName"
          label="联网单位"
          min-width="90"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="imei"
          label="设备编码"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="url"
          label="URL"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          align="center"
          prop="event"
          label="事件类型"
          min-width="90"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.event == 1" type="warning"
              >设备状态更新</el-tag
            >
            <el-tag v-else-if="scope.row.event == 2" type="success"
              >告警事件</el-tag
            >
            <el-tag v-else-if="scope.row.event == 3" type="info"
              >绑定事件</el-tag
            >
            <el-tag v-else-if="scope.row.event == 4" type="danger"
              >解绑事件</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="code"
          label="http响应码"
          min-width="100"
          show-overflow-tooltip
        ></el-table-column>
        <!-- <el-table-column align="center" prop="data" label="事件内容" min-width="200"   placement="right"
                    show-overflow-tooltip></el-table-column> -->
        <el-table-column
          align="center"
          prop="data"
          label="事件内容"
          min-width="100"
        >
          <template slot-scope="scope">
            <el-popover placement="top" trigger="click" class="elPopover">
              <template>
                <div class="set-popper" v-html="scope.row.data"></div>
              </template>
              <div slot="reference" class="set-content">
                {{ scope.row.data }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="limit"
        @pagination="LoginLog"
        class="pagination"
      />
    </div>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqSubscribePushLogPage } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "subscribe",
  components: {
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      //实现时间限制选择在一个月内而且不能超过当前时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //获取当前时间戳
          let myDate = new Date();
          let newY = myDate.getFullYear();
          let newM = myDate.getMonth() + 1;
          let newD = myDate.getDate();
          let oldTime =
            newY +
            "-" +
            (newM < 10 ? "0" + newM : newM) +
            "-" +
            (newD < 10 ? "0" + newD : newD) +
            " " +
            "23:59:59";
          // let oldTime="2022-7-5 23:59:59"
          oldTime = new Date(oldTime).getTime(); // 将中国时间转换成毫秒
          // 今天之后的时间不可选
          if (time.getTime() > oldTime) {
            //time.getTime() > Date.now()
            return true;
          }
          //选择日期范围为一个月
          if (this.cuttentTime != "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      timeArr: [],
      search_val: {
        event: "",
        imei: "",
      },
      eventList: [
        {
          id: 1,
          name: "设备状态更新",
        },
        {
          id: 2,
          name: "告警事件",
        },
        {
          id: 3,
          name: "绑定事件",
        },
        {
          id: 4,
          name: "解绑事件",
        },
      ],
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      loadingTable: false,
      targetId: "",
      loadingSearch: false,
      showPopover: false,
      hasSearch: false,
    };
  },
  watch: {},
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.LoginLog();
  },
  methods: {
    // 搜索
    async onSearch() {
      this.page = 1;
      this.limit = 10;
      this.showPopover = false;
      this.LoginLog();
    },
    // 重置
    async resetClick() {
      this.timeArr = [];
      this.search_val = {
        event: "",
        imei: "",
      };
      this.page = 1;
      this.limit = 10;
      await this.LoginLog();
    },
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.LoginLog();
      this.loadingSearch = false;
    },
    // 清空
    clearNickname() {
      this.page = 1;
      this.limit = 10;
      this.LoginLog();
    },
    // 获取
    async LoginLog() {
      if (this.timeArr == null) {
        this.timeArr = "";
      }
      this.loadingTable = true;
      let res = await reqSubscribePushLogPage(this.page, this.limit, {
        event: this.search_val.event,
        imei: this.search_val.imei,
        startTime: this.timeArr[0],
        endTime: this.timeArr[1],
        tenantId: this.user.tenantId,
        orgId: this.targetId,
      });
      this.loadingTable = false;
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.hasSearch =
        this.search_val.event || this.timeArr[0] || this.timeArr[1]
          ? true
          : false;
      this.tableData = res.data.rows;
      this.total = res.data.total || 0;
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
@import url("~@views/style/tree.less"); //左侧组织机构样式
// @import url("./logLogin.less");

.header_left {
  display: flex;
}

// 查询按钮
::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
  //  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, background 0s, border 0s, -webkit-box-shadow .15s ease-in-out;

  // &:hover {
  //   box-shadow: 0px 0px 16px 0px ~"rgb(115 103 240 / 50%)";
  //   transition: box-shadow 0.3s;
  // }
}

// 日期控件
.el-range-editor.el-input__inner {
  margin-left: 15px;
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt;
}

.set-popper {
  width: 500px;
}

.set-content {
  cursor: default;
  width: 100%;
  overflow: hidden;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

.dropdown {
  background: #7367f0;
  color: #fff;
  border: none;
}

::v-deep .el-button--small {
  border: none;
}

// 高级搜索----------
</style>
